import ProTable from '@ant-design/pro-table';
import React, {useState} from 'react';
import {defaultPagination, paginationTool} from '@/utils/util';
import {useMount, useRequest} from 'ahooks';
import {cloudGoodsChange, findByCloudPageList} from '@/services/ant-design-pro/goods';
import {Button, Tag} from 'antd';
import {PlusOutlined} from '@ant-design/icons';


const cloneTbale = () => {
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );
  const {
    run: fetchByPageList,
    refresh,
    data: dataList,
    loading,
  } = useRequest ( findByCloudPageList, {
    debounceWait: 100,
    manual: true,
  } );
  const columns = [
    {
      title: '产品编号',
      dataIndex: 'id',
      search: false,
    },
    {
      title: '产品名称',
      dataIndex: 'name',
    },
    {
      title: '产品分类',
      dataIndex: 'categoryName',
      search: false,
    },
    {
      title: '图片',
      dataIndex: 'image',
      valueType: 'image',
      search: false,
    },
    {
      title: '市场价',
      dataIndex: 'marketPrice',
      search: false,
      valueType: 'money',
    },
    {
      title: '云仓库存',
      dataIndex: 'quantity',
      search: false,
    },
    {
      title: '时间',
      dataIndex: 'createDate',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'cloudType',
      key: 'cloudType',
      render: (_, row, index, action) => {
        return _ == 1 ? <Tag color="green">已上架</Tag> : <Tag color="magenta">已下架</Tag>
      }
    },
    {
      title: '操作',
      width: '164px',
      key: 'cloudType',
      valueType: 'cloudType',
      render: (_, row, index, action) => {
        console.log ( "cloudType", row.cloudType )
        return (row.cloudType == 1 ? <Button size="small" type="primary" danger onClick={() => {
          cloudGoodsChange ( {type: 0, goodsId: row.id} ).then ( (res) => {
            refresh ()
          } )
        }}>云仓下架</Button> : <Button size="small" type="primary" onClick={() => {
          cloudGoodsChange ( {type: 1, goodsId: row.id} ).then ( (res) => {
            refresh ()
          } )
        }}>云仓上架</Button>)
      },
    },
  ];
  useMount ( () => {
    fetchByPageList ();
  } );

  return (
    <ProTable
      search={false}
      onDataSourceChange={(d) => {
        console.log ( 'onDataSourceChange', d );
      }}
      onLoad={(d) => {
        // 数据加载完操作
        console.log ( 'onDataSourceChange', d );
      }}
      toolBarRender={() => [
        <Button
          type="link"
          href="/goods/add?id=0"
          key="button"
          icon={<PlusOutlined/>}
          type="primary"
        >
          新建
        </Button>,
      ]}
      dataSource={dataList?.data?.list}
      loading={loading}
      pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
        setPagination ( data1 );

        fetchByPageList ( {...pagination} );
      } )}
      search={{
        defaultCollapsed: false,
        labelWidth: 'auto',
      }}
      cardBordered={true}
      columns={columns}
    ></ProTable>
  );
};

export default cloneTbale;
